<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>上传</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<script src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/upload.css" />
	</head>
	<body>
		<div id="app">
			<div id="main">
				<div id="box">发布视频</div>
				<div id="description">
					<div class="descrip_span">作品描述</div>
					<button type="button" class="layui-btn demo-class-accept" lay-options="{accept: 'video'}">
						<i class="layui-icon layui-icon-upload"></i>
						上传视频
					</button>
					<br />
					<br />
					<span style="color: red;">*</span>标题:&nbsp;&nbsp;
					<el-input v-model="title" placeholder="请填写作品标题,为作品获得更多流量"></el-input>
					<br />
					&nbsp;&nbsp;简介:
					<div id="intro">
						<textarea @input="handleInput($event)" v-model="content" placeholder="请填写作品简介"
							id="intro_text"></textarea>
						<div class="message"><strong id="tagshow" @click="tagshow">#添加话题</strong>&nbsp;&nbsp;
							&nbsp;&nbsp;<strong id="friend" @click="friendShow">@用户</strong></div>
					</div>
					<div id="tags">
						<template v-for="obj in taglist">
							<div @click="tagchoose(obj)" class="tags_class">#&nbsp;<span>{{obj.tagContent}}</span><span
									class="tags_span">{{obj.tagNum}}</span></div>
						</template>
						<template v-for="obj in friendlist">
							<div @click="friendchoose(obj)" class="tags_class">
								@&nbsp;<span>{{obj.userinfo.userName}}</span></div>
						</template>
					</div>
					<div class="text">选择封面</div>
					<img id="imgElement" src="../img/好磕！.jpg" width="138" height="89" />
					<button type="button" class="layui-btn layui-btn-danger" id="ID-upload-demo-size">
						<i class="layui-icon layui-icon-upload"></i> 上传封面
					</button>
					<div class="layui-inline layui-word-aux">
						图片大小最小 300mb
					</div>
					<br />
					<br />
					&nbsp;&nbsp;分类:&nbsp;&nbsp;
					<el-select v-model="classId" placeholder="请选择">
						<el-option v-for="item in options" :key="item.id" :label="item.classify" :value="item.id">
						</el-option>
					</el-select>
					<br />
					<br />
					&nbsp;&nbsp;设置谁可以看:&nbsp;&nbsp;
					<el-radio v-model="status" label="1">公开</el-radio>
					<el-radio v-model="status" label="2">好友可见</el-radio>
					<el-radio v-model="status" label="3">仅自己可见</el-radio>
				</div>
				<button class="but" @click="uploadViode">发布</button>
				<button id="temporarily">暂存返回</button>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				addtagList: [], //添加标签
				addUserList: [], //添加用户
				imgtype: '',
				worksCover: '', //封面地址
				content: '', //内容
				title: '', //标题
				status: '1', //状态
				frilmsg: '', //视频地址
				taglist: [],
				classId: '', //分类id
				tagId: '', //发布视频表
				options: [],
				friendlist: [], //朋友列表
				strif: ''
			},
			methods: {
				handleInput(event) {
					let currentChar = event.target.value.slice(-1); // 获取最新输入的字符
					console.log("当前输入的值:", event.target.value);
					console.log("最新输入的字符:", currentChar);
					if (currentChar === "#") {
						this.strif = "#"
						this.friendlist = [];
						$("#tags").css("display", "block")
					} else if (currentChar == " ") {
						if (this.strif == "#") {
							let cont = event.target.value;
							let index = cont.lastIndexOf("#");
							this.addtagList.push(cont.slice(index + 1, cont.length));
						} else if (this.strif == "@") {
							userid=window.localStorage.getItem("userid");
							let friend = {
								"userId": userid,
								"userFriend":this.friendlist[0].userFriend
							}
							this.addUserList.push(friend)
						}

						$("#tags").css("display", "none")
					} else if (currentChar == "@") {
						this.strif = "@"
						this.taglist = [];
						$("#tags").css("display", "block")
					}
					//模糊查询输入的标签
					if (this.strif == "#") {
						axios.get(API + "selectLikeTag?currentChar=" + currentChar).then(res => {
							if (res.data && Array.isArray(res.data) && res.data.length > 0) {
								this.taglist = res.data;
							} else {
								let cont = event.target.value;
								let index = cont.lastIndexOf("#");
								this.taglist = [{
									"tagContent": cont.slice(index + 1, cont.length),
									"tagNum": 0
								}];
							}
						})
					} else if (this.strif = "@") {
						let cont = event.target.value;
						let index = cont.lastIndexOf("@");
						let userName = cont.slice(index + 1, cont.length);
						if (userName == '') {
							return
						}
						//模糊查询用户
						axios.get(API + "selectUserLike?userName=" + userName).then(res => {
							this.friendlist = res.data;
						})
					}


				},
				friendchoose(obj) {
					$("#tags").css("display", "none")
					let introtext = this.content;
					let userid = window.localStorage.getItem("userid");
					let friend = {
						"userId": userid,
						"userFriend": obj.userFriend
					}
					this.addUserList.push(friend)
					this.content = introtext + obj.userinfo.userName + " ";
				},
				tagchoose(obj) {
					$("#tags").css("display", "none")
					let introtext = this.content;
					this.addtagList.push(obj.tagContent);
					this.content = introtext + obj.tagContent + " ";
				},
				uploadViode() {
					let userid = window.localStorage.getItem("userid");
					let releaseTable = {
						'title': this.title,
						'content': this.content,
						'status': this.status,
						'worksType': 0,
						'worksCover': this.worksCover,
						'viewCounts': 0,
						'forwardNum': 0,
						'classId': this.classId,
						'auditStatus': 0,
						'userId': userid,
						'tagId': this.tagId,
						'frilmsg': this.frilmsg
					}
					if (this.frilmsg == '') {
						this.$message.warning('视频还未上传！')
						return;
					}
					if (this.title == '' || this.title == null) {
						this.$message.warning('标题不能为空！')
						return;
					}
					if (this.worksCover == '') {
						this.$message.warning('封面还未上传！')
						return;
					}
					if (this.classId == '' || this.classId == null) {
						this.$message.warning('分类不能为空！')
						return;
					}

					//添加标签
					if (this.addtagList != '') {
						let map = new Map
						map.set("addtagList", this.addtagList)
						const obj = Object.fromEntries(map);
						axios.post(API + "addtag", obj).then(res => {
							if (!res.data) {
								this.$message.warning('网络又开小差了！')
								return;
							}
						})
						
					}
					axios.post(API + "uploadViode", releaseTable).then(res => {
						if (res.data != "201") {
							if (res.data!=false) {
								this.$message.success('发布成功0o0/--快分享给你的小伙伴吧！！')
								console.log(res.data);
								let map = new Map
								map.set("addUserList", this.addUserList)
								map.set("releaseId",res.data)
								const obj = Object.fromEntries(map);
								axios.post(API + "sendInform", obj).then(res => {
									if (!res.data) {
										this.$message.warning('等待中……')
									}
								})
								setTimeout(function(){
									//成功后等待两秒退出
									location.href = "indexData.html"
								},2000)
							} else {
								this.$message.error('网络开小差了，发布失败>~</')
							}
						} else {
							this.$message.warning('发布遇到了点小问题')
						}
					})
				},
				initData() {
					//分类
					axios.get(API + "clssifyList").then(res => {
						console.log(res.data)
						this.options = res.data;
					})
				},
				tagshow() {
					$("#tags").css("display", "block")
					let introtext = this.content;
					console.log(introtext)
					this.content = introtext + "#";
					//查询所有标签
					axios.get(API + "AllTags").then(res => {
						console.log(res.data)
						this.taglist = res.data
					})
				},
				friendShow() {
					this.taglist = "";
					let userId = window.localStorage.getItem("useridPY");
					$("#tags").css("display", "block")
					let introtext = this.content;
					console.log(introtext)
					this.content = introtext + "@";
					//查询所有标签
					axios.get(API + "findAtt?userId=" + userId).then(res => {
						console.log(res.data)
						this.friendlist = res.data
					})
				}
			},
			mounted() {
				//加载分类
				let then = this;
				this.initData()
				//文件上传
				layui.use(function() {
					var upload = layui.upload;
					var layer = layui.layer;
					// 渲染
					upload.render({
						elem: '.demo-class-accept', // 绑定多个元素
						url: API + 'upfile', // 此处配置你自己的上传接口即可
						accept: 'file', // 普通文件
						done: function(res) {
							layer.msg('加载成功');
							console.log(res);
							then.frilmsg = res.frilmsg;
						}
					});
					// 渲染
					upload.render({
						elem: '#ID-upload-demo-size',
						url: API + 'upfile', // 此处配置你自己的上传接口即可
						size: 13072, // 限制文件大小，单位 KB
						done: function(res) {
							layer.msg('加载成功');
							console.log(res);
							then.worksCover = res.frilmsg;
							$("#imgElement").attr("src", "http://localhost:9000/star/" + then
								.worksCover)
						}
					});
				});
			}
		})
	</script>
	<script type="text/javascript">
		//监听全局点击
		$(document).on('click', function(e) {
			$("#tags").css("display", "none")
		});
		// 阻止#tags自身点击触发document事件（可选）
		$('#tagshow').on('click', function(e) {
			e.stopPropagation();
		});
		$("#friend").on('click', function(e) {
			e.stopPropagation();
		})
		$("#intro").on('click', function(e) {
			e.stopPropagation();
		})
		$('#tags').on('click', function(e) {
			e.stopPropagation();
		});
		$("#temporarily").click(function() {
			location.href = "../createData/indexData.html";
		})
	</script>
</html>